<template>
  <div class="box">
    <div>
      <div class="left">
        <p>发现新版本</p>
        <p>V6.1</p>
      </div>
      <div class="right">
        <van-icon class="icon" name="gem" />
      </div>
    </div>
    <div>
      <p>1.法国红酒电饭锅覆盖寒假快乐电饭锅户籍科户籍科法国红酒</p>
      <p>1.法国红酒电饭锅户籍科法国红酒</p>
      <p>1.法国红酒电饭锅户籍科法国红酒</p>
      <p>wife发过火借口法国红酒</p>
    </div>
    <div class="bottom">
      <p @click="$emit('IS')">残忍拒绝</p>
      <p>立即升级</p>
    </div>
  </div>
</template>

<script setup>
defineExpose(["IS"]);
</script>

<style scoped>
.box {
  width: 80vw;
  height: 80vw;
  border-radius: 4vw;
  overflow: hidden;
}
.box > div:nth-child(1) {
  height: 12.667vw;
  background: #ff5e81;
  display: flex;
  padding: 3.467vw;
}
.box > div:nth-child(1) > div {
  text-align: center;
  font-size: 4.533vw;
  font-weight: bold;
  color: white;
  flex: 1;
}
.icon {
  font-size: 13.334vw;
  color: white;
}
.box > div:nth-child(2) {
  font-size: 4vw;
  padding: 3.6vw;
}
.box > div:nth-child(2) > p {
  margin: 2.667vw 0;
}
.box > div:nth-child(2) > p:last-child {
  font-size: 2.933vw;
  color: #ccc;
  text-align: center;
}

.bottom {
  height: 13.333vw;
  display: flex;
  font-size: 4.533vw;
  border-top: 0.133vw solid #ccc;
}
.bottom > p {
  flex: 1;
  text-align: center;
  font-weight: bold;
  line-height: 13.333vw;
}
.bottom > p:nth-child(2) {
  border-left: 0.133vw solid #ccc;
  color: #ff5e81;
}
</style>
